import type { Config } from "tailwindcss";
const plugin = require("tailwindcss/plugin");

const config: Config = {
  content: ["./src/**/*.vue"],
  theme: {},
  darkMode: "class", // media根据系统切换夜间模式，class根据类名切换夜间模式
  plugins: [
    plugin(function ({
      matchUtilities,
      theme,
    }: {
      matchUtilities: any;
      theme: any;
    }) {
      matchUtilities({
        "tw-text-ellipsis": (value: number) => {
          if (value == 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
            };
          } else {
            return {
              "-webkit-box-orient": "vertical",
              display: "-webkit-box",
              overflow: "hidden",
              "text-overflow": " ellipsis",
              "word-break": " break-all",
              "-webkit-line-clamp": value,
            };
          }
        },
        "tw-border": (value: string) => {
          const [v1, v2, v3] = value.split("|");
          return {
            border: `${v1} ${v2} ${v3}`,
          };
        },
        "tw-border-b": (value: string) => {
          const [v1, v2, v3] = value.split("|");
          return {
            "border-bottom": `${v1} ${v2} ${v3}`,
          };
        },
        "tw-border-t": (value: string) => {
          const [v1, v2, v3] = value.split("|");
          return {
            "border-top": `${v1} ${v2} ${v3}`,
          };
        },
      });
    }),
  ],
};
export default config;
